<template>
    <div>
        <el-alert
            title="母包的文件名, 应该包含包名、版本、以及对应的区分标识."
            type="info"
            :closable="false"
            show-icon>
        </el-alert>
        <el-divider></el-divider>
        <el-table
            ref="multipleTable"
            stripe
            border
            :data="baseList"
            tooltip-effect="dark"
            style="width: 100%"
            class="text-center">
<!--            <el-table-column label="路径" prop="path" min-width="350"/>-->
            <el-table-column label="母包" prop="name" min-width="200"/>
            <el-table-column label="大小" prop="size" width="100"/>
            <el-table-column label="修改时间" prop="mtime" width="160"/>
            <el-table-column label="变化时间" prop="ctime" width="160"/>
            <el-table-column label="操 作" width="150px">
                <template slot-scope="scope">
                    <destroy-confirm
                        route="apk/DestroyBase"
                        :primary="scope.row.name"
                        @success="onDestroy">
                    </destroy-confirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-10">
            <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加母包</el-button>
        </div>

        <el-dialog
            title="添加母包"
            :visible.sync="form.show"
            width="410px"
            :append-to-body="true"
            center>
<!--            accept="application/vnd.android.package-archive"-->
            <el-upload
                ref="upload"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :on-progress="uploadProgress"
                :before-upload="beforeUpload"
                class="upload-demo"
                drag
                :headers="$store.getters['backend/header']"
                :action="form.action"
                name="apk"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传 apk 文件，且不超过 300MB</div>
            </el-upload>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                form: {
                    action: '/admin/api/apk/base',
                    show: false,
                }
            }
        },
        computed: {
            baseList() {
                return this.$store.state.apk.baseList;
            },
        },
        methods: {
            create() {
                this.form.show = true;
            },
            edit(row) {
                this.form.data = row;
                this.form.show = true;
            },
            getBaseList() {
                if (!this.baseList.length) this.$store.dispatch('apk/BaseList');
            },
            onDestroy() {
                this.$store.dispatch('apk/BaseList');
            },
            uploadSuccess(response, file, fileList) {
                // 重建缓存
                this.$store.dispatch('apk/BaseList');
                this.$message.success('操作成功');
                // 清空文件列表
                this.$refs.upload.clearFiles();
                this.form.show = false;
            },
            uploadError(err, file, fileList) {
                console.log('err', err);
                console.log('message', err.message);
                let response = JSON.parse(err.message);
                this.$message.error(response.message);
            },
            uploadProgress(event, file, fileList) {

            },
            beforeUpload(file) {
                /*
                * todo upload 组件可以设置, accept="application/vnd.android.package-archive"
                * todo 但是设置后拖拽上传无效, 所以在这里进行类型判断
                * */
                if (file.type !== 'application/vnd.android.package-archive') {
                    this.$message.error('仅支持 apk 文件');
                    return false;
                }
            }
        },
        created() {
            this.getBaseList();
        }
    }
</script>

<style scoped>

</style>

